<template>
  <view class="privilege">
    <view class="privilege-nav">
      <view @tap="onClickItem(index)" 
      :class="{ active: current === index }" 
      v-for="(item, index) in navs" :key="index" v-text="item"></view></view>
    <swiper circular :current="current" @change="onSwiperChange">
      <swiper-item>
        <view class="two">
          <view style="background-image: url('/static/images/vip/vip01.png');">
            <view class="title">福利加成</view>
            <view class="description">
              <view>福利加成</view>
              <view>奖励拿不停</view>
            </view>
          </view>
          <view style="background-image: url('/static/images/vip/vip02.png');">
            <view class="title">拿去花额度</view>
            <view class="description">
              <view>拿去花额度提高</view>
              <view>助威</view>
            </view>
          </view>
        </view>
        <view class="three">
          <view style="background-image: url('/static/images/vip/vip03.png');">
            <view class="title">阳光值上限</view>
            <view class="description">
              <view>更多的阳光值上限</view>
              <view>趣味玩法玩个够</view>
            </view>
          </view>
          <view style="background-image: url('/static/images/vip/vip04.png');">
            <view class="title">会员专属任务</view>
            <view class="description">
              <view>专属福利</view>
              <view>专属奖励</view>
            </view>
          </view>
          <view style="background-image: url('/static/images/vip/vip05.png');">
            <view class="title">专属头衔</view>
            <view class="description">
              <view>获得专属头衔</view>
              <view>让你不在普通</view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="two">
          <view style="background-image: url('/static/images/vip/svip01.png');">
            <view class="title text-white">福利加成</view>
            <view class="description">
              <view>福利加成</view>
              <view>奖励拿不停</view>
            </view>
          </view>
          <view style="background-image: url('/static/images/vip/svip02.png');">
            <view class="title text-white">拿去花额度</view>
            <view class="description">
              <view>拿去花额度提高</view>
              <view>助威</view>
            </view>
          </view>
        </view>
        <view class="three">
          <view style="background-image: url('/static/images/vip/svip03.png');">
            <view class="title text-white">阳光值上限</view>
            <view class="description">
              <view>更多的阳光值上限</view>
              <view>趣味玩法玩个够</view>
            </view>
          </view>
          <view style="background-image: url('/static/images/vip/svip04.png');">
            <view class="title text-white">会员专属任务</view>
            <view class="description">
              <view>专属福利</view>
              <view>专属奖励</view>
            </view>
          </view>
          <view style="background-image: url('/static/images/vip/svip05.png');">
            <view class="title text-white">专属头衔</view>
            <view class="description">
              <view>获得专属头衔</view>
              <view>让你不在普通</view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import baseMixins from "@/utils/mixins";
export default {
  mixins: [baseMixins],
  name: "privilege",
  data() {
    return {
      current: 0,
      navs: ["普通会员", "超级会员"]
    };
  },
  mounted() {
    this.$store.dispatch("setting/getConfig");
  },
  methods: {
    onClickItem(index){
      this.current = index;
    },
    onSwiperChange({ detail }) {
      this.current = detail.current;
    }
  }
};
</script>

<style lang="scss" scoped>
.privilege {
  &-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    > view {
      padding: 5upx 15upx;
      font-size: 24upx;
      background: #ffffff;
      &.active {
        background-color: #007ce5;
        color: #ffffff;
      }
    }
  }
  swiper {
    margin-top: 15upx;
    height: 540upx;
    .two,
    .three {
      display: flex;
      justify-content: center;
      align-items: center;
      > view {
        position: relative;
        margin: 15upx;
        width: 215upx;
        height: 244upx;
        background-size: 100% 100%;
        .title {
          text-align: center;
          line-height: 60upx;
          color: #ff7b05;
          font-size: 24upx;
          &.text-white {
            color: #ffffff;
          }
        }
        .description {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 5upx;
          font-size: 24upx;
          width: 100%;
          text-align: center;
          color: #7b7b7b;
          transform: scale(0.9);
        }
      }
    }
  }
}
</style>
